<template>
  <div >
    <div class="box ">
    <cloud-cover/>
    </div>
    <div class="BOX">
      <div class="text">
        <div class="logo">
         <img src="@/assets/newLogo/letters-cloude-logo.png" alt="" >
          <div class="middle">
            <span  class="size1">AI开放社区</span>
            <!-- <img style="width: 100%;" src="../../assets/water2.png" alt=""> -->
          </div>
        </div>
        <div class="size-box">
          <p class="size2">为每个想学习编程的人提供一个少走弯路的平台</p>
          <p class="size3">向着月亮出发，即使不能到达，也能站在群星之中</p>
        </div>
        <div class="bottom-box">
          <div class="btn-box1">
            <img src="@/assets/标签.png">
            <span @click="$router.push('/front/kecheng')">课程</span>
          </div>
          <div class="btn-box2">
            <img src="@/assets/商城.png">
            <span @click="$router.push('/front/home')">商城</span>
          </div>
          <div class="btn-box3">
            <img src="@/assets/关于我们.png">
            <span @click="$router.push('/NewBK')">关于我们</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CloudCover from '@/common/bg/cloud-cover.vue';

export default {
  name: 'shouye',
  components:{
    CloudCover,
  },
  data() {
      return{

      }
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.box{
  position: absolute;
  z-index: -100;
  top: 0;
  width: 100%;
  height: 100vh;  
}
.BOX{
  width: 1400px;
  height: 100vh;
  // background-color: aquamarine;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  .text{
    width: 100%;
    height: 500px;
    // background: burlywood;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .logo{
      width: 500px;
      height: 100px;
      // background-color: aquamarine;
      display: flex;
      justify-content: space-around;
      align-items: center;

      img{
        width: 150px;
      }
    }
    .size-box{
      width: 800px;
      height: 100px;
      // background-color: coral;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      margin: 50px;
    }
    .bottom-box{
      width: 600px;
      height: 100px;
      // background-color: rgb(30, 150, 60);
      display: flex;
      justify-content: center;
      align-items: center;
      >* {
        width: 500px;
        height: 50px;
        // background-color: blueviolet;
        margin: 10px;
        border-radius:5%;
        display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
      }
      >*:hover{
             background-color: #2C3E50!important;
      }
      img{
        width: 23%;
        margin-right: 10px;
        vertical-align: middle;
      }
      span{
        color: #000;
        font-size: 20px;
        color:#fff;
        vertical-align: middle;
      }
      .btn-box1{
        border-radius:20px ;
        background-color: #409EFF;
        span{
          font-size: 25px;
          font-family: hunsize;
        }
      }
      .btn-box2{
        border-radius:20px ;

        background-color: #26A65B;
        span{
          font-size: 25px;
          font-family: hunsize;
        }
      }
      .btn-box3{
        border-radius:20px ;

        background-color:  #D24D57;
        span{
          font-size: 25px;
          font-family: hunsize;
        }
      }
    }
  }
}

.hcqStyle6{
  
}
/*base code*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
/*the animation definition*/
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  50% {
    opacity: 1
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  50% {
    opacity: 1
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn
}
.size1{
  font-size: 60px;
  // font-weight: bolder;
  color:#4391df49;
  font-family: hunsize;
}
.size2{
  font-size:30px; 
  color:#007efc80;
  margin-bottom: 20px;
  font-family: hunsize;

}
.size3{
  color:#007efc80;

  font-size: 30px;
  font-family: hunsize;
}
@font-face {
  font-family: hunsize;
  src: url(../../assets/size/字小魂梦幻体\(商用需授权\).ttf);
}
.middle span{
  background-image: url(../../assets/water.png);
  -webkit-background-clip: text;
  animation: water 150s infinite;
}
@keyframes water {
  from{
    background-position: left 0 top 0px;
  }
  to{
    background-position: left 20000px top -20px;
  }
}
</style>